<template>
  <div class="dialog-page">
    <el-dialog
      :visible.sync="dialogVisible"
      :width="popupWidth"
      :before-close="handleClose"
    >
      <span slot="title" class="dialog-title">
        <div>发布文档</div>
        <p>点击文档选择具体插入到目录的位置</p>
      </span>
      <div>
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span class="custom-tree-node-detail" :data-id="data.id">
              <div class="custom-tree-node-detail-word">插入到</div>
              <el-radio-group v-model="radio">
                <el-radio :label="1">同级</el-radio>
                <el-radio :label="2">子级</el-radio>
              </el-radio-group>
            </span>
          </span>
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Save">发布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'catalogDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    popupWidth: {
      type: String,
      default: '550px'
    }
  },
  data () {
    return {
      radio: 1,
      id: '',
      data: [
        {
          label: '一级 1',
          id: '1',
          children: [
            {
              label: '二级 1-1',
              id: '1-1',
              children: [
                {
                  label: '三级 1-1-1',
                  id: '1-1-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          id: '2',
          children: [
            {
              label: '二级 2-1',
              id: '2-1',
              children: [
                {
                  label: '三级 2-1-1',
                  id: '2-1-1'
                }
              ]
            },
            {
              label: '二级 2-2',
              id: '2-2',
              children: [
                {
                  label: '三级 2-2-1',
                  id: '2-2-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 3',
          id: '3',
          children: [
            {
              label: '二级 3-1',
              id: '3-1',
              children: [
                {
                  label: '三级 3-1-1',
                  id: '3-1-1'
                }
              ]
            },
            {
              label: '二级 3-2',
              id: '3-2',
              children: [
                {
                  label: '三级 3-2-1',
                  id: '3-2-1'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
        this.$emit('updateVisible', val)
      }
    }
  },
  methods: {
    Save () {
      console.log('插入级别--------' + this.radio)
      console.log(this.id)
      // this.$emit('submitPopupData')
    },
    haveId (list) {
      for (let i = 0; i < list.length; i++) {
        console.log(list[i].id)
        if (list[i].children && list[i].children.length > 0) {
          this.tempId = list[i].id
          this.haveId(list[i].children)
        }
      }
    },
    handleClose () {
      this.$emit('handleClose')
    },
    handleNodeClick (data) {
      this.id = data.id
      const eleArr = document.querySelectorAll('.custom-tree-node-detail')
      for (var i = 0, len = eleArr.length; i < len; i++) {
        if (eleArr[i].getAttribute('data-id') === data.id) {
          eleArr[i].style.display = 'flex'
        } else {
          eleArr[i].style.display = 'none'
        }
      }
    }
  }
}
</script>

<style lang="scss">
.dialog-page {
  .dialog-title {
    div {
      margin: 0;
      font-size: 18px;
    }
    p {
      margin: 0;
      font-size: 14px;
      color: #828282;
    }
  }
  .el-tree {
    border: 1px solid #eee;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
      .custom-tree-node-detail {
        align-items: center;
        display: none;
        border-bottom: 1px solid #409EFF;
        .custom-tree-node-detail-word {
          margin-right:10px;
          color:#828282;
        }
      }
  }

}
</style>
